<template>
    <div>
        
        <!-- 图书导航 -->
        <BookTab :book-type="bookType"/>
        
        <!--商品列表-->
        <div class="book">
            <div class="book-content" style="width: 100%; display: flex; flex-wrap: wrap;">
                <div v-for="book in bookInfo" :key="book.id" :title="book.name"
                     style="margin: 2px 0 2px 0; display: flex; border: 10px solid rgb(245 245 245);">
                    <div class="img-box">
                        <img :src="require('@/' + book.bookImage)" class="imgbackground">
                    </div>
                    <div class="book-msg">
                        <div style="height: 93%;">
                            <h5>书名：{{ book.name }}</h5>
                            <h5 class="author">作者：{{ book.author }}</h5>
                            <h5 class="author">出版日期：{{ book.workTime }}</h5>
                            <p class="price">售价：￥{{ book.price }}元</p>
                            <p class="sales">销量：{{ book.sales }}册</p>
                            <p class="sales" :title="book.bookDes">书籍简介：{{
                                    book.bookDes.length > 75 ? book.bookDes.substring(0, 75) + '...' : book.bookDes
                                }}</p>
                        </div>
                        <div style="float: bottom; display: flex;">
                            <el-button style="color: black; font-family: cursive; font-size: 15px; border-radius: 4px;
                                    background: rgb(217 91 5); margin: -6px 2px 3px 0px; padding: 5px 5px;"
                                       type="button" @click="addShopCar(book)">添加至购物车
                            </el-button>
                            <img class="collect-svg" :src="require('@/assets/image/svg/collect.svg')" title="添加收藏" @click="bookCollect(book)">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分页查询 -->
        <div style="padding: 2px 0 20px 0; margin: 0 17.8%;text-align: left; ">
            <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page="pageNum"
                 :page-sizes="[3, 6, 9, 12]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, -> , jumper"
                 :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>

import {hotPage, page} from "@/api/book/book"

import BookTab from "@/views/book/BookTab";

import {ref} from 'vue'

// 购物车
import {addShopCar} from "@/api/book/shopCar"

// 收藏
import {addCollect} from "@/api/book/collect"

export default {
    name: "BookPage",
    des: "书籍展示",
    props: {
        // bookInfo: Array,
        bookType: String
    },
    components: {
        BookTab
    },
    data() {
        return {
            loading: false, // 列表等待转圈
            total: 10,
            pageNum: 1,
            pageSize: 6,
            bookInfo: [], // 书籍信息
            params: {}, // 查询条件
            urls: '/details/',
            bookNumber: ref(0),
            collect: false,
        }
    },
    
    created() {
        this.loadBook()
    },
    
    inject:['reload'],
    
    methods: {
        // 初始化图书信息
        loadBook() {
            if ('热门' === this.bookType) {
                hotPage(this.pageNum, this.pageSize, this.params).then(res => {
                    this.bookInfo = res.data.records;
                    this.total = res.data.total
                }).catch(() => this.loading = false)
            } else {
                page(this.pageNum, this.pageSize, this.params).then(res => {
                    this.bookInfo = res.data.records;
                    this.total = res.data.total
                }).catch(() => this.loading = false)
            }
        },
        
        // 个数
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.loadBook()
        },
        
        // 页码
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum
            this.loadBook()
        },
        
        // 添加购物车
        addShopCar(book) {
            let user = sessionStorage.getItem("admin-user") ? JSON.parse(sessionStorage.getItem("admin-user")) : {};
            if (Object.keys(user).length === 0) {
                this.$message.warning("请登录后执行此操作")
                this.$router.push({path: '/login'})
                return
            }
            addShopCar(user.id, book.id, book.name, book.price, 1, book.bookImage).then(res => {
                this.$message.success("图书添加购物车成功，可查看购物详情")
                this.pageReload()
            }).catch(res => this.$message.warning("图书添加购物车失败"))
        },
        
        // 图书收藏
        bookCollect(book) {
            let user = sessionStorage.getItem("admin-user") ? JSON.parse(sessionStorage.getItem("admin-user")) : {};
            if (Object.keys(user).length === 0) {
                this.$message.warning("请登录后执行此操作")
                this.$router.push({path: '/login'})
                return
            }
            addCollect(user.id, book.id, book.name).then(res => {
                this.$message.success("图书添加收藏成功，可查看收藏详情")
                this.loadBook()
            }).catch(res => this.$message.warning("图书添加收藏失败"))
        },
        
        // 界面刷新
        pageReload(){
            this.reload()
        },
    }
}
</script>

<style scoped>

@import '~font-awesome/css/font-awesome.min.css';

.img-box {
    /*width: 200px;*/
    height: 310px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img-box .imgbackground {
    width: 200px;
    height: 310px;
}

.book {
    display: flex;
    margin: 0 17.8% 0 17.8%;
    /*width: 33%;*/
}

.book-msg {
    width: 170px;
    text-align: left;
    margin: 0 9px 0 9px;
}

.book-msg p {
    margin-top: 10px;
    line-height: 1.5;
    font-size: smaller;
}

.book-msg h5 {
    font-size: smaller;
    margin-bottom: 5px;
}

.collect-svg {
    width: 24px;
    height: 22px;
    margin: -4px 0 0 5px;
}

</style>
